<!DOCTYPE html> 
<html> 

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Multi-page template</title> 
	<link rel="stylesheet" href="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head> 

	
<body> 

<!-- Start of first page: #one -->
<div data-role="page" id="one" data-url="/view?name=${facility.name}">
  
         <div data-role="header">
                <!--<a href="<g:createLinkTo dir="/"/>"><img id="logo" src="${createLinkTo(dir: 'images', file: 'smallcross.png')}" alt="healththink logo"/></a>-->
                <d>HealthThink</d>
         </div>


	<div data-role="content" >
          <div id="facilityInfo">
            <h1>${facility.name}</h1>
            <g:if test="${!facility.isInOperation}">
              <h1>This Facility Is Not In Operation</h1></br>
              </br>
            </g:if>
            <a>Type:  </a>${facility.facilityType}</br>
            <a>Latitude: </a>${facility.latitude}   <a>Longitude: </a>${facility.longitude}</br>
            </br>
            <a><b>Address</b></a></br>
            <div id="addressInfo">
              <table>
                <tr>
                  <td align="right">Address1:</td>
                  <td style="padding-left: 10px">${facility?.primaryAddress?.address}</td>
                </tr>
                <tr>
                  <td align="right">Address2:</td>
                  <td style="padding-left: 10px">${facility?.primaryAddress?.address2}</td>
                </tr>
                <tr>
                  <td align="right">LGA:</td>
                  <td style="padding-left: 10px">${facility?.primaryAddress?.lga}</td>
                </tr>
                <tr>
                  <td align="right">State:</td>
                  <td style="padding-left: 10px">${facility?.primaryAddress?.state}</td>
                </tr>
              </table>
            </div>
            </br>
            <a><b>Graphic Location</b></a></br>
            ${facility?.facilitySite?.graphicLocation}</br>
            </br>
            <a><b>Mission Statement</b></a></br>
            ${facility?.facilitySite?.missionStatement}</br>
            </br>
            <a><b>Summary</b></a></br>
            ${facility?.facilitySite?.detail}</br>
            </br>
            <g:form action="editGeneralInfo">
              <g:hiddenField name="name" value="${facility.name}"/>
              <g:submitButton data-icon="info" name="edit" value="Edit General Info" />
            </g:form>
            <a><b>Phone Numbers</b></a></br>
            <g:each var="number" in="${facility?.phones}">
              <table>
                <tr>
                  <td align="right">${number.phoneType}:</td>
                  <td style="padding-left: 10px">${number.number}</td>
                </tr>
              </table>  
            </g:each>
            <g:form action="editNumbers">
              <g:hiddenField name="name" value="${facility.name}"/>
              <g:submitButton name="number" value="Edit Phone Numbers" />
            </g:form>
            <div class="ui-body ui-body-b">
              <p><a href="#attributes" data-role="button" data-icon="arrow-r" data-iconpos="right">Attributes</a></p>
              <p><a href="#forums" data-role="button" data-icon="arrow-r" data-iconpos="right">Forums</a></p>
              <p><a href="#services" data-role="button" data-icon="arrow-r" data-iconpos="right">Services</a></p>
              <p><a href="#groups" data-role="button" data-icon="arrow-r" data-iconpos="right">Groups</a></p>
            </div>
          </div>
	</div><!-- /content -->
        
        <div data-role="footer">
              <p>
                <h4>HealthThink</h4>
                <div id="UserLocation"></div>
              </p>
                <g:form controller="facility" action="search">
                  <g:submitButton name="button" value="Search" />
                </g:form>
                <g:form controller="facility" action="facilityList" data-inline="true">
                  <g:submitButton name="facilities" value="Facilities" data-inline="true"/>
                </g:form>
                <sec:ifLoggedIn>
                  <g:form controller="logout">
                    <g:submitButton name="logout" value="Logout"/>
                  </g:form>
                  <g:form controller="user" action="view">
                    <g:submitButton name="user" value="User Page" data-inline="true"/>                
                  </g:form>
                </sec:ifLoggedIn>
                <sec:ifNotLoggedIn>
                  <g:form controller="login" action="auth">
                    <g:submitButton name="login" value="Login" data-inline="true"/>                
                  </g:form>
                  <g:form controller="user" action="register">
                    <g:submitButton name="signUp" value="Sign Up" data-inline="true"/>                
                  </g:form>
                <ul>
                  <li><facebookAuth:connect permissions="email"/></li>
                </ul>
              </sec:ifNotLoggedIn>
            </div>
</div><!-- /page one -->


<!-- Start of second page: #two -->
<div data-role="page" id="attributes" data-theme="a">

	<div data-role="header">
                <!--<a href="<g:createLinkTo dir="/"/>"><img id="logo" src="${createLinkTo(dir: 'images', file: 'smallcross.png')}" alt="healththink logo"/></a>-->
                <d>HealthThink</d>
         </div>

	
        <div data-role="content" data-theme="a">	
          <h2><u>Attributes</u></h2></br>
          <g:each var="attr" in="${facility.facilityAttributes}">
            
            <div data-role="controlgroup">
              <g:form controller="attribute" action="view">
                <g:hiddenField name="name" value="${attr.attribute.name}" />
                <g:submitButton name="attr" value="${attr.attribute.name}: ${attr.getAverageRating()}" data-mini="true" data-role="button"/>
              </g:form>
            </div>
                
              <div data-role="controlgroup" data-type="horizontal">
                <g:form action="rateAttribute">
                  <g:hiddenField name="facilityName" value="${facility.name}" data-inline="true" data-mini="true" data-role="button"/>
                  <g:hiddenField name="attrName" value="${attr.attribute.name}" data-inline="true" data-mini="true" data-role="button"/>
                  <g:select name="rating" from="${1..10}"></g:select>
                  <g:submitButton name="rate" value="Rate"/>
                </g:form>
              </div
          </g:each>
          
          <g:form action ="editAttributes">
            <g:hiddenField name="name" value="${facility.name}"/>
            <g:submitButton name="edit" value="Edit Attibutes"/>
          </g:form>
                
                <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b" data-icon="back">Main</a></p>
                
		
	</div><!-- /content -->

	
	<div data-role="footer">
                    <p><h4>HealthThink</h4></p>
        </div>
</div><!-- /page two -->


<!-- Start of third page:-->
<div data-role="page" id="forums">

	<div data-role="header">
		<!--<a href="<g:createLinkTo dir="/"/>"><img id="logo" src="${createLinkTo(dir: 'images', file: 'smallcross.png')}" alt="healththink logo"/></a>-->
                <d>HealthThink</d>
	</div><!-- /header -->

	<div data-role="content" data-theme="a">	
		<h2><u>Forums</u></h2>
                <g:each var="forum" in="${forumList}" status="i">
                  <g:form controller="forum" action="view">
                    <g:hiddenField name="facilityName" value="${forum.facility.name}"/>
                    <g:hiddenField name="topic" value="${forum.topic}"/>
                    <g:submitButton name="forumTopic" value="${forum.topic}"/>
                  </g:form>
                  </br>
                </g:each>
                <g:form action="viewForums">
                  <g:hiddenField name="name" value="${facility.name}"/>
                  <g:submitButton name="viewForums" value="View All Forums" data-icon="grid"/>
                </g:form>
                </br>
                <g:form controller="forum" action="createNew">
                  <g:hiddenField name="name" value="${facility.name}"/>
                  <g:submitButton name="new" value="New Forum" data-icon="plus"/> 
                </g:form>		
		
                <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b" data-icon="back">Main</a></p>
	
	</div><!-- /content -->
	
	<div data-role="footer">
		<p><h4>HealthThink</h4></p>
	</div><!-- /footer -->
    
</div>

<div data-role="page" id="services">
  
      <div data-role="header">
		<!--<a href="<g:createLinkTo dir="/"/>"><img id="logo" src="${createLinkTo(dir: 'images', file: 'smallcross.png')}" alt="healththink logo"/></a>-->
                <d>HealthThink</d>
      </div><!-- /header -->
      
      <div data-role="content" data-theme="a">
        
        <h2><u>Services</u></h2>
          <g:each var="service" in="${facility.facilitySvcs}">
            <g:form controller="facilitySvc" action="view">
              <g:hiddenField name="facilityName" value="${facility.name}"/>
              <g:hiddenField name="serviceName" value="${service.name}"/>
              <g:submitButton name="submit" value="${service.name}"/>
            </g:form>
            </br>
          </g:each>
          </br></br>
          <g:form controller="facilitySvc" action="addNew">
            <g:hiddenField name="facilityName" value="${facility.name}"/>
            <g:submitButton name="submit" value="Add New" data-icon="plus"/>
          </g:form>
          <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b" data-icon="back">Main</a></p>
        
      </div>
      
      <div data-role="footer">
		<p><h4>HealthThink</h4></p>
      </div><!-- /footer -->
  
</div>

<div data-role="page" id="groups">
  
  <div data-role="header">
		<!--<a href="<g:createLinkTo dir="/"/>"><img id="logo" src="${createLinkTo(dir: 'images', file: 'smallcross.png')}" alt="healththink logo"/></a>-->
                <d>HealthThink</d>
  </div><!-- /header -->
  
  <div data-role="content" data-theme="a">
    <h2><u>Groups</u></h2>
          <g:each var="group" in="${facility.facilityGroups}">
            <table>
              <tr>
                <td>
                  <g:form controller="facilityGroup" action="view">
                    <g:hiddenField name="name" value="${group.facilityGroup.groupName}"/>
                    <g:hiddenField name="facilityName" value="${facility.name}"/>
                    <g:submitButton name="submit" value="${group.facilityGroup.groupName}"/>
                  </g:form>
                </td>
              </tr>
            </table>
          </g:each>
          </br>
          <g:form action="editGroups">
            <g:hiddenField name="name" value="${facility.name}"/>
            <g:submitButton name="submit" value="Edit Groups"/>
          </g:form>
          <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b" data-icon="back">Main</a></p>
  </div>
  
  
  <div data-role="footer">
		<p><h4>HealthThink</h4></p>
  </div><!-- /footer -->
  
</div>

</body>
</html>